<template>
  <view class="coinbankIndex">
    <view
      class="pledgeCoins"
      v-for="(item, index) in productList"
      :key="index"
    >
      <view class="tokenTitle">
        <img
          :src="item.logoUrl"
          alt=""
        />
        <view class="tokenName">{{ item.name }}</view>
        <view
          class="state"
          v-if="item.enableFlag == 1 && item.isEnd == 0"
          >{{ $t('home.text4') }}</view
        >
        <view
          class="state1"
          v-else
          >{{ $t('mining.text29') }}</view
        >
      </view>

      <view class="viewidendInfo">
        <view class="left">{{ $t('home.text5') }}</view>
        <view class="right">{{ item.totalDistribution }}</view>
      </view>

      <view class="viewidendInfo">
        <view class="left">{{ $t('mining.text21') }}</view>
        <view class="right">{{ item.cycleDay }}{{ $t('home.text7') }}</view>
      </view>

      <view class="viewidendInfo">
        <view class="left">{{ $t('mining.text22') }}</view>
        <view class="right">{{ item.endTime }}</view>
      </view>

      <view
        class="pledgeMain"
        v-for="(pool, index1) in item.poolList"
        :key="index1"
      >
        <view class="pledgeMainLeft">
          <view class="pledgeMainTitle">
            <img
              :src="pool.logoUrl"
              alt=""
            />
            <span>{{ pool.pledgeCoin }} {{ $t('mining.text15') }} </span>
            <!-- <span>FDUSD 奖池 {{ $t('home.text12') }}</span> -->
          </view>

          <view class="participationInfo">
            <view class="info">
              <span>{{ $t('home.text13') }}</span>
              <span style="font-weight: bold">{{ pool.memberCount }}</span>
            </view>

            <view class="info">
              <span>{{ $t('home.text14') }}</span>
              <span style="font-weight: bold">{{ pool.pledgeNum }}</span>
            </view>
          </view>
        </view>
        <view class="pledgeMainRight">
          <view @click="skip('/pages/coinbank/projectInfo/projectInfo', item)">
            {{ $t('home.text12') }}
          </view>
        </view>
      </view>

      <view class="claimed">
        <view @click="skip1('/pages/coinbank/unclaimed/unclaimed')">{{ $t('mining.text14') }}</view>
      </view>
    </view>

    <PledgePopup ref="popup"></PledgePopup>
  </view>
</template>

<script>
import PledgePopup from '../pledgePopup.vue';
import { productList } from '../../../common/apiString';
export default {
  components: {
    PledgePopup
  },
  data() {
    return {
      productList: []
    };
  },
  mounted() {
    this.getProductList();
  },
  methods: {
    open() {
      this.$refs.popup.$refs.popup.open();
    },
    skip1(url) {
      uni.navigateTo({
        url: url
      });
    },
    skip(url, item) {
      uni.navigateTo({
        url: url + '?itemId=' + item.id
      });
    },
    // 获取质押产品列表;
    getProductList() {
      this.$utils.initDataToken({ url: productList, data: {}, type: 'GET' }, (res, msg) => {
        this.productList = res;
      });
    }
  }
};
</script>

<style lang="less" scoped>
.coinbankIndex {
  background: #1f282f;
  height: 100%;
  .pledgeCoins {
    padding: 30rpx;
    background: #1f282f;

    .tokenTitle {
      display: flex;
      align-items: center;
      img {
        width: 42rpx;
        height: 42rpx;
      }

      .tokenName {
        font-size: 32rpx;
        font-weight: bold;
        margin-left: 10rpx;
        color: #fff;
      }

      .state {
        padding: 5rpx 12rpx;
        margin-left: 20rpx;
        font-size: 20rpx;
        background: rgba(2, 187, 109, 0.17);
        border-radius: 14rpx;
        color: #1acb6b;
      }

      .state1 {
        padding: 5rpx 12rpx;
        margin-left: 20rpx;
        font-size: 20rpx;
        background: #f1f1f1;
        border-radius: 14rpx;
        color: #999999;
      }
    }

    .viewidendInfo {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 40rpx;
      .left {
        font-size: 24rpx;
        color: #fff;
      }

      .right {
        font-weight: bold;
        font-size: 24rpx;
        color: #fff;
      }
    }

    .pledgeMain {
      margin-top: 40rpx;
      height: 208rpx;
      border-radius: 14rpx 14rpx 14rpx 14rpx;
      border: 2rpx solid #475864;
      display: flex;
      justify-content: space-between;

      padding: 30rpx 20rpx;

      .pledgeMainLeft {
        .pledgeMainTitle {
          display: flex;
          align-items: center;
          img {
            width: 44rpx;
            height: 44rpx;
            margin-right: 12rpx;
          }
          span {
            font-weight: bold;
            color: #fff;
          }
        }
        .participationInfo {
          margin-top: 30rpx;
          .info {
            line-height: 45rpx;
            color: #fff;
            font-size: 24rpx;
          }
        }
      }

      .pledgeMainRight {
        display: flex;
        align-items: center;
        justify-content: center;
        view {
          background: #2f7cf7;
          padding: 15rpx 30rpx;
          background: #2f7cf7;
          border-radius: 12rpx 12rpx 12rpx 12rpx;
          color: #fff;
        }
      }
    }
    .claimed {
      margin-top: 32rpx;
      display: flex;
      justify-content: flex-end;

      view {
        text-align: center;
        color: #fff;
        padding: 0 40rpx;
        height: 76rpx;
        line-height: 76rpx;
        background: #2f7cf7;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
      }
    }
  }
}
</style>
